<template>
  <div class="anniversary">
    <div class="bannerWrap">
      <!-- 轮播图 -->
      <div class="banner flexb">
        <div class="bannerWord">
          <p>{{ $t('anniversary.theFirst') }}</p>
          <p>{{ $t('anniversary.theFirstTime') }}</p>
          <p>{{ $t('anniversary.theFirstTip1') }}</p>
          <p>{{ $t('anniversary.theFirstTip2') }}</p>
          <p>{{ $t('anniversary.theFirstTip3') }}</p>
        </div>
        <div>
          <img src="@/assets/img/activity/anniversary/bannerIcon-cn.png"
            alt="" style="width: 440px; margin-right: 60px;"
            v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
          <img src="@/assets/img/activity/anniversary/bannerIcon-en.png" alt="" style="width: 430px;" v-else>
        </div>
      </div>
    </div>
    <!-- 视频 -->
    <div class="video">
      <span class="video-btn" @click="handlePlayVideo"></span>
      <a :href="videoUrl" class="hidden" target="_blank" ref="videoHref"></a>
    </div>
    <!-- 有奖征文 -->
    <div class="wordMain">
      <h3 class="title">{{ $t('anniversary.essayActivity') }}</h3>
      <div class="wordCont">
        <p class="caption">{{ $t('anniversary.essayCaption') }}</p>
        <div class="flexb rank">
          <div style="width: 100%;">
            <div class="rankCont">
              <div class="rankLeft">
                <div>{{ $t('anniversary.activityTime') }}</div>
                <div>{{ $t('anniversary.activityReward') }}</div>
              </div>
              <div class="rankRight">
                <div>{{ $t('anniversary.activityTimeCont') }}</div>
                <div>{{ $t('anniversary.activityRewardTip1') }}</div>
                <div>{{ $t('anniversary.activityRewardTip2') }}</div>
                <div>{{ $t('anniversary.activityRewardTip3') }}</div>
                <div>{{ $t('anniversary.activityRewardTip4') }}</div>
                <div>{{ $t('anniversary.activityRewardTip5') }}</div>
              </div>
            </div>
            <div class="joinBtn" @click="$router.push({name: 'articles'})">{{ $t('anniversary.prizeWinner') }}</div>
            <p>{{ $t('anniversary.note') }}</p>
          </div>
          <div class="rankImg">
            <img src="@/assets/img/activity/anniversary/zw.png" alt="">
          </div>
        </div>
      </div>
    </div>
    <!-- 实力测试 -->
    <div class="strengthMain" v-if="posterHide">
      <h3 class="title strength">{{ $t('anniversary.testOnNewdex') }}</h3>
      <div class="strengthCont flex">
        <div>
          <img src="@/assets/img/activity/anniversary/img1.png" alt=""
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
          <img src="@/assets/img/activity/anniversary/img1en.png" alt="" v-else>
        </div>
        <div>
          <img src="@/assets/img/activity/anniversary/img2.png" alt=""
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
          <img src="@/assets/img/activity/anniversary/img2en.png" alt="" v-else>
        </div>
        <div>
          <img src="@/assets/img/activity/anniversary/img3.png" alt=""
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
          <img src="@/assets/img/activity/anniversary/img3en.png" alt="" v-else>
        </div>
      </div>
      <div class="toPicBtn flexc">
        <span @click="handleLoginAuth('poster')">
          {{ $t('anniversary.clickOn') }}
        </span>
      </div>
    </div>
    <!-- 周年趴 -->
    <div class="carnival">
      <h3 class="title strength">{{ $t('anniversary.annualCarnival') }}</h3>
      <div class="carnival-cont">
        <div class="flexb carnival-list">
          <div class="carnival-item carnival-item-left back1 flexb">
            <div class="carnival-item-cont">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont1') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont11') }}</p>
              <!-- <div class="part" @click="handleToHunt">{{ $t('anniversary.annualCarnivalCont111') }}</div> -->
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list1.png" alt="" class="ewm">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime2') }}</span>
          </div>
          <div class="carnival-item carnival-item-right back2 flexb" @click="handleChainNode" style="cursor: pointer;">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon2.png" alt="">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont2') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont22') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list2.png" alt="" class="ewm">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime2') }}</span>
          </div>
        </div>
        <div class="flexb carnival-list">
          <div class="carnival-item carnival-item-left back1 flexb" @mouseenter="showActive(3)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon3.png" alt="">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont3') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont33') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list3.png" alt="" class="ewm" v-show="active !== 3">
              <img src="@/assets/img/activity/anniversary/ewm3.png" alt="" class="ewm ewmImg" v-show="active === 3">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
          <div class="carnival-item carnival-item-right back2 flexb cursorPointer" @mouseenter="showActive(4)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon4.png" alt="">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont4') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont44') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list4.png" alt="" class="ewm" v-show="active !== 4">
              <img src="@/assets/img/activity/anniversary/ewm4.jpg" alt="" class="ewm ewmImg" v-show="active === 4">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
        </div>
        <div class="flexb carnival-list">
          <div class="carnival-item carnival-item-left back1 flexb cursorPointer" @mouseenter="showActive(5)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon5.jpg" alt=""
              style="width: 100px;">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont5') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont55') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list5.jpg" alt="" class="ewm" v-show="active !== 5">
              <img src="@/assets/img/activity/anniversary/ewm5.png?v=1.1" alt="" class="ewm ewmImg" v-show="active === 5">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
          <div class="carnival-item carnival-item-right back2 flexb cursorPointer" @mouseenter="showActive(6)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon6.png" alt="">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont6') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont66') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list6.png" alt="" class="ewm" v-show="active !== 6">
              <img src="@/assets/img/activity/anniversary/ewm6.jpg" alt="" class="ewm ewmImg" v-show="active === 6">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
        </div>
        <div class="flexb carnival-list">
          <div class="carnival-item carnival-item-left back1 flexb cursorPointer" @mouseenter="showActive(7)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon7.png" alt=""
              v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
              <img src="@/assets/img/activity/anniversary/kuaixin.png" alt=""
              v-else style="margin-left: -30px;">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont7') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont77') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list7.png" alt="" class="ewm" v-show="active !== 7">
              <img src="@/assets/img/activity/anniversary/ewm7.png" alt="" class="ewm ewmImg" v-show="active === 7">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
          <div class="carnival-item carnival-item-right back2 flexb cursorPointer" @mouseenter="showActive(8)" @mouseleave="showActive(0)">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon8.png" alt="">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont8') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont88') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list8.png" alt="" class="ewm" v-show="active !== 8">
              <img src="@/assets/img/activity/anniversary/ewm8.png" alt="" class="ewm ewmImg" v-show="active === 8">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime3') }}</span>
          </div>
        </div>
        <div class="flexb carnival-list">
          <div class="carnival-item carnival-item-left back1 flexb">
            <div class="carnival-item-cont">
              <img src="@/assets/img/activity/anniversary/icon9.png" alt=""
              v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
              <img src="@/assets/img/activity/anniversary/lieyun.png" alt=""
              v-else style="margin-left: -10px;">
              <p class="word1">{{ $t('anniversary.annualCarnivalCont9') }}</p>
              <p class="word2">{{ $t('anniversary.annualCarnivalCont99') }}</p>
            </div>
            <div class="carnival-item-ewm">
              <img src="@/assets/img/activity/anniversary/list9.png" alt="" class="ewm">
            </div>
            <span class="date">{{ $t('anniversary.annualCarnivalTime4') }}</span>
          </div>
        </div>
      </div>
    </div>
    <a href="https://www.chainnode.com/post/364022" target="_blank" class="hidden" ref="chainNode"></a>
    <!-- 周年庆惊喜转不停-->
    <div class="luckDraw">
      <h3 class="title strength">{{ $t('anniversary.nonStrp') }}</h3>
      <div class="prizeList"
        v-show="isStart !== 0"
        ref="noticeHover"
        style="position: relative; height: 35px; overflow: hidden; width: 600px;"
        :style="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW' ? 'padding: 0 0 0 140px': ''">
        <i class="iconfont icon-xiaoxitishi"></i>
        <div class="noticeScroll" ref="noticeScroll">
          <div :key="index" v-for="(item, index) in lastDrawLogList" style="height: 35px;">
            <!-- 恭喜{{item.account }}抽得{{ item.reward }}的奖励！！！  -->
            {{ $t('anniversary.congra', {account: item.account, reward: item.reward}) }}
          </div>
        </div>
      </div>
      <!-- 抽奖 -->
      <div class="luckDrawCont turntable-box">
        <div class="btn" @click="handleTurntable">
          <template v-if="isStart === 1">
            <span>{{ $t('anniversary.joinNow1') }}</span>
            <span>{{ $t('anniversary.joinNow2') }}</span>
          </template>
          <template v-else-if="isStart === 2">
            <span>{{ $t('anniversary.closed') }}</span>
          </template>
          <template v-else>
            <span>{{ $t('anniversary.commingSoon1') }}</span>
            <span>{{ $t('anniversary.commingSoon2') }}</span>
          </template>
        </div>
        <div ref="turntable" v-if="turntableShow">
        </div>
      </div>
      <p v-if="$store.state.app.scatter
        && $store.state.app.scatter.identity
        && remainDrawCount !== null
        && $store.state.app.scatter.chain === 'eos'
        && isStart === 1"
        class="center"
        style="margin-top: 30px; color: #FFC78A;">
        {{ $t('anniversary.remaining', {time: remainDrawCount}) }}
      </p>
      <div class="luckDrawBtn flex">
        <!-- 我的抽奖记录 -->
        <span @click="handleLoginAuth('record')">{{ $t('anniversary.myPrize') }}</span>
        <!-- 我要领奖 -->
        <!-- <span @click="handleGetReward">{{ $t('anniversary.claimMyReward') }}</span> -->
      </div>
      <div class="luckDrawRules">
        <p>{{ $t('anniversary.luckyDrawRules') }}</p>
        <p>{{ $t('anniversary.luckyDrawTip1') }}</p>
        <p>{{ $t('anniversary.luckyDrawTip2') }}</p>
        <p>{{ $t('anniversary.luckyDrawTip3') }}</p>
        <p>{{ $t('anniversary.luckyDrawTip4') }}</p>
        <p class="mb40">{{ $t('anniversary.luckyDrawTip5') }}</p>
        <p>{{ $t('anniversary.drawFrequency') }}</p>
        <p>{{ $t('anniversary.drawFrequencyTip1') }}</p>
        <p>{{ $t('anniversary.drawFrequencyTip2') }}</p>
        <p>{{ $t('anniversary.drawFrequencyTip3') }}</p>
        <p>{{ $t('anniversary.drawFrequencyTip4') }}</p>
        <p>* {{ $t('anniversary.drawFrequencyTip5') }}</p>
        <p class="center" style="margin-top: 30px;">* {{ $t('anniversary.drawFrequencyTip6') }}</p>
      </div>
    </div>
    <!-- 获奖记录 -->
    <div class="awardRecord layer" v-if="layerHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.myPrize') }}</p>
        <template v-if="drawLogList.length > 0">
          <div class="tableList">
            <div class="tablehead flex">
              <div>{{ $t('anniversary.Prize') }}</div>
              <div>{{ $t('anniversary.timePrize') }}</div>
            </div>
            <div class="wrapTable">
              <div class="tableBody flex" :key="index" v-for="(item, index) in drawLogList">
                <div>{{ item.reward }}</div>
                <div>{{ item.createTs | dateFormatBIH }}</div>
              </div>
            </div>
          </div>
          <div class="wantBtn" @click="handleShowOrder">{{ $t('anniversary.exchangeThePrize') }}</div>
        </template>
        <template v-else>
          <div class="flexc" style="padding-top: 160px; font-size: 20px;">{{ $t('anniversary.noWinningRecord') }}</div>
        </template>
      </div>
    </div>
    <!-- 兑奖页面 -->
    <div class="submitOrderRecord layer" v-if="layerOrderHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="handleCloseLayer"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.exchangeThePrize') }}</p>
        <div class="word">
          <p style="margin-bottom: 30px;">
            {{ $t('anniversary.asPossible') }}
          </p>
          <p>{{ $t('anniversary.asPossible1') }}</p>
        </div>
        <div class="orderBtn flexb">
          <span @click="handleCloseLayer">{{ $t('anniversary.cancelPrize') }}</span>
          <a href="https://newdex.zendesk.com/hc/zh-cn/requests/new" target="_blank"
          v-if="$store.state.app.language === 'zh-CN' || $store.state.app.language === 'zh-TW'">
            {{ $t('anniversary.submitRequest') }}
          </a>
          <a href="https://newdex.zendesk.com/hc/en-us/requests/new" target="_blank" v-else>
            {{ $t('anniversary.submitRequest') }}
          </a>
        </div>
      </div>
    </div>
    <!-- 生成二维吗 -->
    <div class="submitOrderRecord layer ewmCode" v-if="codeHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="codeHide=false;"></div>
        <div class="flexc">
          <div class="poster">
            <div class="imgDiv">
              <img :src="posterUrl" alt="" class="imgPos">
              <div class="account">
                <span>{{ $t('anniversary.EosAccount') }}</span>
                <span>{{  $store.state.app.scatter.identity.accounts[0].name }}</span>
              </div>
              <div class="sub flexb accountSub">
                <div class="item">
                  <div class="lab">{{ $t('anniversary.joinTime') }}</div>
                  <div class="num">
                    <span>{{ posterData.date | dateFormat}}</span>
                  </div>
                </div>
                <div class="item rightLab">
                  <div class="lab">{{ $t('anniversary.transactionNumber') }}</div>
                  <div class="num">
                    <span>{{ posterData.tradeNum }}</span><span class="small">{{ $t('anniversary.bi') }}</span>
                  </div>
                </div>
              </div>

              <div class="sub noMargin flexb">
                <div class="item">
                  <div class="lab">{{ $t('anniversary.tradingTokenNumber') }}</div>
                  <div class="num">
                    <span>{{ posterData.coinNum }}</span><span class="small">{{ $t('anniversary.zhong') }}</span>
                  </div>
                </div>
                <div class="item rightLab">
                  <div class="lab">{{ $t('anniversary.tradingAmount') }}</div>
                  <div class="num">
                    <span style="margin-right: 3px;">{{ posterData.tradeAmount }}</span><span class="small">EOS</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 抽奖结束弹窗 -->
    <div class="endDialog layer" v-if="layerEndHide" :class="{'getReward': ownInfo && ownInfo.awardLevel !== 10}">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close"  @click="layerEndHide = false;"></div>
        <h2 v-if="ownInfo.awardLevel !== 10">{{ $t('anniversary.winPrize') }}</h2>
        <h2 v-else style="color: #fff;">{{ $t('anniversary.thankYouFor') }}</h2>
        <h3 v-if="ownInfo.awardLevel !== 10">{{ $t('anniversary.congratulations', {reward: ownInfo.reward}) }}</h3>
        <h3 v-else style="color: #fff;">{{ $t('anniversary.unfortunately') }}</h3>
        <img :src="imgUrl" alt="">
        <h4 v-if="ownInfo.awardLevel === 1">{{ $t('anniversary.endTime') }}</h4>
        <div class="endBtn" @click="layerEndHide = false;">{{ $t('anniversary.keepDrawing') }}</div>
      </div>
    </div>
    <!-- 中奖次数用完 -->
    <div class="submitOrderRecord layer noneDialog" v-if="layerNoneHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="layerNoneHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.drawTimes') }}</p>
          <div class="endBtn" @click="layerNoneHide = false;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖未开始 -->
    <div class="submitOrderRecord layer noneDialog" v-if="notstartedHide">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="notstartedHide=false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.actiTime2') }}</p>
          <div class="endBtn" @click="notstartedHide = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 抽奖已结束 -->
    <div class="submitOrderRecord layer noneDialog" v-if="startOver">
      <div class="layer-cont">
        <div class="closeBtn iconfont el-icon-close" @click="startOver = false;"></div>
        <p class="center awardRecordCapition">{{ $t('anniversary.tips') }}</p>
        <div class="word">
          <p>{{ $t('anniversary.activeOver') }}</p>
          <div class="endBtn" @click="startOver = false;" style="margin-top: 40px;">{{ $t('anniversary.tipsConfirm') }}</div>
        </div>
      </div>
    </div>
    <!-- 视频播放组件 -->
    <my-video
      :video-config="videoConfig"
      @listenVideoLevel="handleVideoLevel"/>
  </div>
</template>

<script>
import MyVideo from '@/components/Video';
import LotteryTurntable from 'lottery-turntable';
import { authorized } from '@/utils/validate';

export default {
  name: 'anniversary', // 周年活动
  data() {
    return {
      videoUrl: '',
      videoConfig: {
        open: false,
        en: 'https://www.youtube.com/embed/qmb0cV1L3IM', // 国外访问视频地址
        zh: 'https://newdex.oss-cn-hangzhou.aliyuncs.com/newdex-anniversary.mp4' // 国内
      },
      noticeScrollTimer: null,
      drawLogList: [], // 个人获奖记录
      remainDrawCount: null, // 抽奖次数
      lastDrawLogList: [], // 最近的中奖记录
      active: 0, // hover显示二维码
      layerHide: false, // 个人获奖记录弹窗
      codeHide: false, // 海报弹窗
      layerOrderHide: false, // 提交工单
      layerEndHide: false, // 结果页
      layerNoneHide: false, // 没抽奖次数
      notstartedHide: false, // 抽奖未开始
      startOver: false, // 抽奖已结束
      ownInfo: { // 抽奖结果
        awardLevel: 0,
        reward: '',
      },
      imgUrl: '',
      isClick: true, // 防止重复点击
      posterData: { // 海报
        date: '2018.08.01',
        tradeNum: 3746,
        coinNum: 76,
        tradeAmount: 12369
      },
      posterUrl: '', // 海报图片链接
      turntable: '',
      turntableShow: true, // 抽奖转盘显示
      isStart: 0, // 是否开始
      posterHide: true, // 隐藏海报
      loading: true, // loading
    }
  },
  components: {
    MyVideo
  },
  props: {},
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        this.remainDrawCount = null;
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.turntableShow = false;
      setTimeout(() => {
        this.turntableShow = true;
        this.$nextTick(() => {
          this.initTurntable();
        });
      }, 1000);
    },
  },
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {
    const token = localStorage.getItem('Frontend-Token');
    const scatter = this.$store.state.app.scatter;
    if (token && scatter && scatter.identity) {
      this.handleDrawInfo();
    }
    // 获取最近中奖记录
    this.handleDrawList();
    this.handleNoticeScroll();
    this.initTurntable();
  },
  beforeDestroy() {
    if (this.noticeScrollTimer) {
      clearInterval(this.noticeScrollTimer)
    }
  },
  methods: {
    // 获取抽奖信息
    handleDrawInfo() {
      this.$http.post('/anniversary/getAccountDrawInfo').then((res) => {
        // if (res.code === 1028) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        if (res.code === 401) {
          authorized(this, (code, result) => {
            if (code === 'error') { // 授权错误
              console.log(result); // eslint-disable-line
              return;
            }
            this.handleDrawInfo();
          });
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        this.drawLogList = res.drawLogList;
      });
    },
    // 初始化转盘
    initTurntable() {
      this.turntable = new LotteryTurntable({
        type: 'transition', // 转盘转动类型
        size: 615, // 转盘尺寸，默认为320
        textSpace: 30, // 奖品名称距离转盘边距，默认为15
        imgSpace: 90, // 奖品图片距离转盘边距，默认为50
        speed: 4, // transition动画持续多长时间，秒为单位
        ring: 10, // 转动多少圈后到达终点，越大转速越快
        values: [
          {
            id: 2, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards2'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward2.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 3, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards3'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward3.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 4, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards4'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward4.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 5, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards5'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward5.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 6, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards6'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward6.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 7, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards7'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward7.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 8, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards8'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward8.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 1, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards1'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward1.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
          {
            id: 9, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.rewards9'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward9.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          }, {
            id: 10, // 奖品id，可以重复（比如：谢谢参与就可以有n个，中奖后会随即选择一个转动到该位置
            name: this.$t('anniversary.thanks'), // 奖品名称
            img: {
              src: 'https://ndx.340wan.com/static/activity/anniversary/reward10.png?v=1.0.3', // 奖品图片路径
              width: 80, // 奖品图片宽度，请根据实际情况去设置，避免太大
              height: 80, // 奖品图片高度，请根据实际情况去设置，避免太大，与宽度等比率缩放
            },
            bg: '#fff', // 该奖品的在转盘中的扇形背景颜色
            fill: '#333', // 奖品名称的文字颜色
          },
        ],
        container: this.$refs.turntable
      });
    },
    // 判断有无登录和授权
    handleLoginAuth(type) {
      if (!this.isClick) return;
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      // 判断所属链是否为eos
      const accountInfo = this.$store.state.app.accountInfo;
      if (accountInfo && accountInfo.chain !== 'eos') {
        this.$message.warning(this.$t('anniversary.plstoEos'));
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          if (type === 'record') {
            this.handleDrawInfo();
            this.layerHide = true; // 个人获奖记录弹窗
          } else {
            this.handleGetPoster(); // 获取海报
          }
        });
        return;
      }
      if (type === 'record') {
        this.handleDrawInfo();
        this.layerHide = true; // 个人获奖记录弹窗
      } else {
        this.handleGetPoster(); // 获取海报
      }
    },
    // 抽奖
    handleTurntable() {
      if (this.isStart === 0) {
        this.notstartedHide = true;
        return;
      }
      if (this.isStart === 2) {
        this.startOver = true;
        return;
      }
      const scatter = this.$store.state.app.scatter;
      if (scatter && !scatter.identity) {
        this.handleWalletPermission();
        return;
      }
      const token = localStorage.getItem('Frontend-Token');
      if (!token) {
        authorized(this, (code, res) => {
          if (code === 'error') { // 授权错误
            console.log(res); // eslint-disable-line
            return;
          }
          this.handleDrawInfo();
        });
        return;
      }
      if (this.remainDrawCount === 0) {
        this.layerNoneHide = true;
        return;
      }
      this.handleStartDraw(); // 开始抽奖
    },
    // 开始抽奖
    handleStartDraw() {
      // 防止重复点击
      if (this.isClick) {
        this.isClick = false;
        setTimeout(() => {
          this.isClick = true;
        }, 4000);
      } else {
        return;
      }
      this.$http.post('/anniversary/startDraw').then((res) => {
        if (res.code === 1028) {
          this.$message.error(this.$t('anniversary.plstoEos'));
          return;
        }
        // if (res.code === 1029) {
        //   this.$message.error(this.$t('anniversary.plstoEos'));
        //   return;
        // }
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.remainDrawCount = res.remainDrawCount;
        const awardLevel = res.awardLevel;
        this.turntable.goto(awardLevel, () => {
          this.layerEndHide = true;
          this.ownInfo = {
            awardLevel: res.awardLevel,
            reward: res.reward
          };
          this.imgUrl = `https://ndx.340wan.com/static/activity/anniversary/reward${res.awardLevel}.png?v=1.0.4`;
        });
        setTimeout(() => {
          this.handleDrawList();
        }, 2000);
      });
    },
    // 获取海报
    handleGetPoster() {
      this.$http.post('/anniversary/getMyPoster').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.posterData = {
          date: res.joinTime,
          tradeNum: res.dealNum,
          coinNum: res.dealSymbolNum,
          tradeAmount: res.dealAmount
        };
        this.posterUrl = res.posterUrl;
        this.codeHide = true;
      });
    },
    // 获取获奖列表
    handleDrawList() {
      this.$http.post('/anniversary/getLastDrawList').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        this.lastDrawLogList = res.lastDrawLogList;
        this.isStart = res.isStart;
        setTimeout(() => {
          this.handleDrawList();
        }, 120000);
      });
    },
    // notice 滚动
    handleNoticeScroll() {
      let noticeScrollWay = -35;
      this.noticeScrollTimer = setInterval(() => {
        if (this.$refs.noticeScroll) {
          this.$refs.noticeScroll.style = `transform: translateY(${noticeScrollWay}px) scale(1);`;
        }
        noticeScrollWay -= 35;
        const num = this.lastDrawLogList.length;
        if (noticeScrollWay < -35 * num) {
          noticeScrollWay = -35;
        }
      }, 3000)
    },
    // 跳转到寻宝页面
    handleToHunt() {
      this.$router.push({
        name: 'treasure'
      })
    },
    // 视频播放
    handlePlayVideo() {
      const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串
      this.videoUrl = this.videoConfig.en;
      const lang = this.$store.state.app.language;
      if (lang === 'zh-CN' || lang === 'zh-TW') {
        this.videoUrl = this.videoConfig.zh;
      }
      if (userAgent.indexOf('Safari') > -1 && userAgent.indexOf('Chrome') === -1) {
        setTimeout(() => {
          this.$refs.videoHref.click();
        }, 500)
        return;
      }
      this.videoConfig.open = true;
    },
    // 关闭视频通知
    handleVideoLevel(val) {
      if (val === 'close') {
        this.videoConfig.open = false;
      }
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      sessionStorage.setItem('checkWalletByChain', 'EOS');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    showActive(index) {
      this.active = index;
    },
    // 链节点
    handleChainNode() {
      this.$refs.chainNode.click();
    },
    handleGetReward() {
      if (!this.isClick) return;
      this.layerOrderHide = true;
    },
    // 关闭抽奖记录弹窗
    handleCloseLayer() {
      this.layerHide = false;
      this.layerOrderHide = false;
    },
    // 我要兑奖
    handleShowOrder() {
      this.layerHide = false;
      this.layerOrderHide = true;
    },
  },
}
</script>
<style lang="scss" scoped>
.anniversary {
  background: #101730;
  color: #fff;
  padding-bottom: 40px;

  .back1 {
    background: linear-gradient(to right, #9b4ee3 , #442ec3);
  }

  .back2 {
    background: linear-gradient(to right, #6363e2 , #d57fad);
  }

  .back3 {
    background: linear-gradient(to right, #505edf , #8c8cec);
  }

  .back4 {
    background: linear-gradient(to right, #3382ec , #5fa1ef);
  }

  .cursorPointer {
    cursor: pointer;
  }

  .bannerWrap {
      height: 500px;
      background: url('../../../assets/img/activity/anniversary/backFlash.png') center center no-repeat;
      background-size: 100% 100%;

    .banner {
      width: 1060px;
      margin: 0 auto 0;
      padding-top: 100px;

      .bannerWord {
        width: 50%;
      }

      p:nth-child(1) {
        font-size: 42px;
        color: #FFC78A;
        margin-bottom: 15px;
      }

      p:nth-child(2) {
        font-size: 25px;
        margin-bottom: 80px;
        color: #fff;
      }

      p:nth-child(3) {
        margin-bottom: 20px;
      }

      p:nth-child(4) {
        margin-bottom: 5px;
      }
    }

    img {
      display: block;
      width: 300px;
    }
  }


  .video {
    width: 913px;
    height: 500px;
    background: url('../../../assets/img/activity/anniversary/video.png');
    position: relative;
    margin: 30px auto 30px;
    background-size: 100% 100%;

    .video-btn {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      background: url('../../../assets/img/videoplay.png');
      background-size: cover;
      cursor: pointer;
    }
  }

  .title {
    text-align: center;
    font-size: 40px;
    margin: 120px 0 60px 0;
    color: #FFC78A;
  }

  .wordCont {
    width: 1000px;
    // height: 500px;
    background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
    margin: auto;
    padding: 70px 70px 0 70px;

    .caption {
      font-size: 25px;
    }

    .rank {
      margin-top: 50px;
      align-items: end;

      .rankCont {
        vertical-align: top;
        width: 100%;

        .rankLeft, .rankRight {
          display: inline-block;
          div {
            margin-bottom: 10px;
          }
        }

        .rankLeft {
          width: 20%;
          vertical-align: top;
        }

        .rankRight {
          padding-top: 1px;
          width: 78%;
        }
      }

      .joinBtn {
        width: 150px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #fff;
        color: #0B105A;
        border-radius: 5px;
        margin: 20px 0 50px 0 ;
        cursor: pointer;
      }
    }

    .rankImg {
      height: 370px;
      img {
        display: block;
        width: 100%;
      }
    }
  }

  .strengthMain {
    margin-bottom: 100px;
    .strength {
      margin: 120px 0 60px 0;
    }

    .strengthCont {
      width: 1120px;
      margin: auto;

      div {
        margin-left: 30px;

        img {
          display: block;
          width: 100%;
        }
      }
    }
    .toPicBtn {
      span {
        min-width: 180px;
        line-height: 40px;
        padding: 0 10px;
        text-align: center;
        margin: 50px auto 0;
        background: #5B86F2;
        // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }

  .carnival {
    .carnival-cont {
      position: relative;
      width: 1260px;
      margin: 0 auto 60px;
      color: #fff;

      .carnival-list {
        position: relative;
        height: 238px;
        margin-bottom: 40px;

        .carnival-item {
          position: relative;
          width: 48.5%;
          height: 100%;
          border-radius: 15px;
          padding: 10px 10px 25px 25px;

          .date {
            position: absolute;
            right: 0;
            top: 0;
            display: block;
            width: 140px;
            height: 37px;
            background: url('../../../assets/img/activity/ambassador/jiaobiao.png') center center no-repeat;
            background-size: 100% 100%;
            line-height: 37px;
            text-align: center;
          }

          .carnival-item-cont {
            flex: 5;

            img {
              display: block;
              width: 130px;
              vertical-align: middle;
              // margin-left: -13px;
              margin-bottom: 20px;
            }

            .word1 {
              font-size: 28px;
              margin: 10px 0 30px;
            }

            .word2 {
              font-size: 14px;
            }

            .part {
              margin-top: 15px;
              width: 100px;
              line-height: 34px;
              border: 1px solid #fff;
              border-radius: 5px;
              text-align: center;
              cursor: pointer;
            }
          }

          .carnival-item-ewm {
            flex: 3;
            // width: 180px;

            img {
              display: inline-block;
              width: 100%;
              margin-bottom: -30px;
            }

            .ewmImg {
              width: 73%;
              margin-left: 40px;
            }
          }
        }
      }
    }
  }

  .luckDraw {
    .prizeList {
      margin: 0 auto 40px;
      line-height: 35px;
      color: #BBCAFF;
      // border: 1px solid #fff;
      border-radius: 20px;
      padding: 0 40px;
      // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
      .noticeScroll {
        transition: transform .4s ease-in-out;
        position: absolute;
        width: 550px;
        padding-left: 30px;
      }
    }

    .luckDrawCont {
      position: relative;
      margin: 20px auto 20px;
      width: 600px;
      height: 600px;
      border-radius: 50%;
      background: #fff;
    }

    .turntable-box{
      width: 680px;
      height: 680px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: url('../../../assets/img/activity/anniversary/turntable.png?v=0.0.1') no-repeat;
      background-size: 100% 100%;
      position: relative;
      font-size: 14px;
      // font-weight: bold;
      margin: 0 auto;

      .btn {
        width: 270px;
        height: 270px;
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%,-50%);
        background: url('../../../assets/img/activity/anniversary/turntableBtn.jpg') no-repeat;
        background-size: 100% 100%;
        box-sizing: border-box;
        font-weight: bold;
        font-size: 20px;
        cursor: pointer;

        p {
          margin: 5px 0 20px 0;
          font-weight: normal;
          font-size: 14px;
          color: #721041;
        }
      }
    }

    .luckDrawBtn {
      justify-content: center;
      margin: 30px 0 100px 0;

      span {
        min-width: 200px;
        line-height: 40px;
        padding: 0 10px;
        text-align: center;
        // background-image: linear-gradient(to right, #5B86F2 0%, #9A94D9 100%);
        background: #5B86F2;
        border-radius: 5px;
        cursor: pointer;
      }

      // span:nth-child(1) {
      //   margin-right: 40px;
      // }
    }

    .luckDrawRules {
      width: 1000px;
      margin: 0 auto 0;

      p {
        line-height: 26px;
      }

      .mb40 {
        margin-bottom: 40px;
      }
    }
  }

  .layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 100000;

    .layer-cont {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 450px;
      min-height: 500px;
      background: #0F152D;
      transform: translate(-50%, -50%);
      padding: 30px 30px 40px 30px;

      .awardRecordCapition {
        color: #FFC78A;
        font-size: 24px;
        margin-bottom: 20px;
      }

      .closeBtn {
        position: absolute;
        top: -0;
        right: -40px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
      }

      .wantBtn {
        text-align: center;
        width: 215px;
        line-height: 54px;
        background: #fff;
        color: #000;
        margin: 50px auto 0;
        border-radius: 5px;
        cursor: pointer;
      }

      .tableList {
        border-radius: 5px;
        text-align: center;

        .tablehead {
          background-image: linear-gradient(-45deg, #5B86F2 0%, #9A94D9 100%);
          color: #000;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }

        .wrapTable {
          height: 275px;
          overflow-y: scroll;
          background: #fff;
          &::-webkit-scrollbar {
            width: 5px;
            height: 5px;
            background-color: #f1f1f1;
            border-radius: 15px;
          }
          /*定义滚动条的轨道，内阴影及圆角*/
          &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 0 #f1f1f1;
            border-radius: 0;
            background-color: #f1f1f1;
          }
          /*定义滑块，内阴影及圆角*/
          &::-webkit-scrollbar-thumb {
            /*width: 10px;*/
            /*height: 25px;*/
            border-radius: 1px;
            -webkit-box-shadow: inset 0 0 0 #c1c1c1;
            background-color: rgba(193, 193, 193, 0.7);
          }
        }

        .tableBody {
          color:#4A4A4A;
          background: #fff;

          div {
            line-height: 55px;
          }

          div:nth-child(1) {
            flex: 2;
          }

          div:nth-child(2) {
            flex: 3;
          }
        }
      }
    }
  }

  .submitOrderRecord {
    font-size: 20px;

    .endBtn {
      display: block;
      width: 187px;
      line-height: 55px;
      text-align: center;
      border-radius: 5px;
      cursor: pointer;
      background: #fff;
      color: #000;
      margin: 30px auto 0;
    }
    .codeCanvas {
      margin-top: 40px;
    }

    .layer-cont {
      min-height: 400px;

      .orderBtn {
        margin-top: 40px;

        span, a {
          border: 1px solid #FFFFFF;
          display: inline-block;
          width: 187px;
          line-height: 55px;
          text-align: center;
          border-radius: 5px;
          cursor: pointer;
        }

        a {
          background: #fff;
          color: #000;
        }
      }
    }
  }

  .ewmCode {
    .layer-cont {
      width: 376px;
      background: #fff;
      padding: 0;
      height: 668px;
    }

    .poster{
      width: 376px;
      height: 668px;
      background: #FFF;
      .imgDiv{
        position: relative;
        width: 100%;
        height: 100%;
        // background: url('../../../assets/img/activity/anniversary/img1.png');
        // background-size: contain;
        // background-repeat: no-repeat;
        padding-top: 404px;

        .imgPos {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
        }

        .account{
          position: relative;
          width: 80%;
          margin: auto;
          font-size: 14px;
          color: #3f5385;
          background: #FFF;
          text-align: center;
          z-index: 10;
        }

        .sub{
          position: relative;
          margin: auto;
          margin-top: 10px;
          background: #fff;
          width: 80%;
          color: #333;
          z-index: 10;

          &.noMargin{
            margin-top: 10px;
          }

          .item{
            flex: 1;
            padding-left: 20px;
            color: #3f5385;
            // &.rightLab {
            //   padding-left: 30px;
            // }
            .lab{
              font-size: 12px;
              margin-bottom: 2px;
            }
            .num{
              font-size: 16px;
            }
            .small {
              font-size: 12px;
            }
          }
        }

        .accountSub {
          margin-top: 30px;
        }
      }
    }
  }

  .noneDialog {
    .layer-cont {
      min-height: 300px;

      .word {
        margin-top: 30px;
      }
    }
  }

  .endDialog {
    text-align: center;

    .layer-cont {
      min-height: 450px;
      background: url('../../../assets/img/activity/anniversary/back1.png') no-repeat;
      background-size: 100% 100%;

      img {
        display: block;
        width: 144px;
        height: 144px;
        margin: 0 auto;
      }

      h2 {
        font-size: 34px;
        color: #FFC78A;
      }

      h3 {
        margin: 16px 0 25px;
        font-size: 22px;
        color: #FFC78A;
      }

      h4 {
        color: #F5A623;
      }

      .endBtn {
        background-image: linear-gradient(0deg, #E5AE65 0%, #FFEA7A 100%);
        border-radius: 7.5px;
        font-size: 18px;
        color: #8B572A;
        line-height: 50px;
        width: 180px;
        text-align: center;
        margin: 70px auto 0;
        cursor: pointer;
      }
    }
  }

  .endDialog.getReward {
    .layer-cont {
      background: url('../../../assets/img/activity/anniversary/back2.png') no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>

